<template>
	<div class="wrapper">
		<div class="login-box">

			<div class="title">
				<b>注 册</b>
			</div>
			<div style="margin-top: 30px">
				<el-form label-width="70px">
					<el-form-item label="手机号">
						<el-input v-model.trim="user.username" aria-required="true"></el-input>
					</el-form-item>
					<el-form-item label="密码" style="margin-top: 25px">
						<el-input v-model.trim="user.password" show-password aria-required="true"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" style="margin-top: 25px">
						<el-input v-model.trim="user.confirmPassword" show-password aria-required="true"></el-input>
					</el-form-item>
					<el-form-item style="margin: 30px 80px">
						<el-button type="success" @click="onSubmit">注册</el-button>
						<el-button @click="$router.push('/')">返回</el-button>
					</el-form-item>
				</el-form>
			</div>



		</div>
	</div>
</template>
	
<script>
import axios from 'axios';

export default {
	// eslint-disable-next-line vue/multi-word-component-names
	name: 'Logins',
	data() {
		return {
			user: {
				username: '',  // 手机号    
				password: '',  // 密码    

			}
		};
	},
	methods: {
		async onSubmit() {
			if (this.user.username === '' || this.user.password === '') {
				this.$message.error("手机号或密码不能为空");
				return;
			}
			if (this.user.password !== this.user.confirmPassword) {
				this.$message.error("两次输入的密码不相同");
				return;
			}
			try {
				const response = await axios.get('http://localhost:8089/consumer/register', { params: this.user });
				if (response.data.code === 200) {
					alert("注册成功！")
					this.$router.push("/front");
				} else {
					this.$message.error(response.data.msg);
				}
			} catch (error) {
				console.error(error);
				this.$message.error("请求失败");
			}
		},
	},
};  
</script>
	
<style scoped>
.wrapper {
	height: 100vh;
	background-image: linear-gradient(to top right, #42b983, #B3C0D1);
	overflow: auto;
}

.login-box {
	margin: 220px auto;
	padding: 40px;
	width: 450px;
	height: 310px;
	background-color: #ffffff;
	border-radius: 10px;
}

.title {
	text-align: center;
	margin-top: 10px;
	font-size: 25px;
	color: #42b983
}
</style>